<template>
	<view class="container">
		<view class="form-section">
			<!-- 文章标题 -->
			<view class="form-item">
				<text class="label">文章标题</text>
				<input type="text" 
					v-model="title" 
					placeholder="请输入标题（5-30字）" 
					placeholder-class="placeholder"
					class="input-field" />
			</view>
			
			<!-- 选择游戏 -->
			<view class="form-item">
				<text class="label">关联游戏</text>
				<view class="game-selector" @click="showGamePicker">
					<view v-if="selectedGame" class="selected-game">
						<image :src="selectedGame.logo" class="game-logo" mode="aspectFill" />
						<text class="game-name">{{ selectedGame.name }}</text>
					</view>
					<text v-else class="placeholder">选择相关游戏</text>
					<text class="arrow">›</text>
				</view>
			</view>
			
			<!-- 文章分类 -->
			<view class="form-item">
				<text class="label">文章分类</text>
				<view class="category-tags">
					<text v-for="category in categories" 
						:key="category.id"
						class="category-tag"
						:class="{ active: selectedCategory === category.id }"
						@click="selectCategory(category.id)">
						{{ category.name }}
					</text>
				</view>
			</view>
			
			<!-- 封面图 -->
			<view class="form-item">
				<text class="label">封面图片</text>
				<view class="cover-uploader" @click="uploadCover" v-if="!coverImage">
					<text class="iconfont icon-image"></text>
					<text class="upload-text">上传封面图</text>
				</view>
				<view class="cover-preview" v-else>
					<image :src="coverImage" mode="aspectFill" class="preview-image" />
					<text class="remove-btn" @click.stop="removeCover">×</text>
				</view>
			</view>
			
			<!-- 文章内容 -->
			<view class="form-item">
				<text class="label">文章内容</text>
				<view class="editor-toolbar">
					<view class="tool-item" @click="insertImage">
						<text class="iconfont icon-image"></text>
					</view>
					<view class="tool-item" @click="insertLink">
						<text class="iconfont icon-link"></text>
					</view>
					<view class="tool-item" @click="formatText('bold')">
						<text class="iconfont icon-bold"></text>
					</view>
					<view class="tool-item" @click="formatText('italic')">
						<text class="iconfont icon-italic"></text>
					</view>
				</view>
				<textarea v-model="content" 
					placeholder="开始写文章..." 
					placeholder-class="placeholder"
					class="content-editor"
					maxlength="-1" />
			</view>
			
			<!-- 文章标签 -->
			<view class="form-item">
				<text class="label">添加标签</text>
				<view class="tags-input">
					<view class="tag-item" v-for="(tag, index) in tags" :key="index">
						<text class="tag-text">{{ tag }}</text>
						<text class="remove-tag" @click="removeTag(index)">×</text>
					</view>
					<input type="text" 
						v-model="newTag"
						placeholder="输入标签按回车添加"
						placeholder-class="placeholder"
						@confirm="addTag"
						class="tag-input-field" />
				</view>
				<text class="tip-text">最多添加5个标签</text>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="draft-btn" @click="saveDraft">存草稿</view>
			<view class="publish-btn" @click="publishArticle">发布文章</view>
		</view>
		
		<!-- 游戏选择弹窗 -->
		<uni-popup ref="gamePicker" type="bottom">
			<view class="game-picker">
				<view class="picker-header">
					<text class="cancel" @click="closeGamePicker">取消</text>
					<text class="title">选择游戏</text>
					<text class="confirm" @click="confirmGameSelection">确定</text>
				</view>
				<view class="game-list">
					<view v-for="game in games" 
						:key="game.game_id" 
						class="game-item"
						:class="{ active: tempSelectedGame?.game_id === game.game_id }"
						@click="selectGame(game)">
						<image :src="game.game_logo" class="game-logo" mode="aspectFill" />
						<text class="game-name">{{ game.game_name }}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			title: '',
			selectedGame: null,
			tempSelectedGame: null,
			categories: [
				{ id: 'review', name: '游戏评测' },
				{ id: 'guide', name: '游戏攻略' },
				{ id: 'story', name: '游戏故事' },
				{ id: 'news', name: '游戏资讯' }
			],
			selectedCategory: '',
			coverImage: '',
			content: '',
			tags: [],
			newTag: '',
			games: games
		}
	},
	methods: {
		showGamePicker() {
			this.$refs.gamePicker.open();
		},
		closeGamePicker() {
			this.tempSelectedGame = this.selectedGame;
			this.$refs.gamePicker.close();
		},
		selectGame(game) {
			this.tempSelectedGame = game;
		},
		confirmGameSelection() {
			this.selectedGame = this.tempSelectedGame;
			this.$refs.gamePicker.close();
		},
		selectCategory(categoryId) {
			this.selectedCategory = categoryId;
		},
		uploadCover() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.coverImage = res.tempFilePaths[0];
				}
			});
		},
		removeCover() {
			this.coverImage = '';
		},
		insertImage() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					// 在光标位置插入图片标记
					this.content += `\n[图片]\n`;
				}
			});
		},
		insertLink() {
			uni.showModal({
				title: '插入链接',
				editable: true,
				placeholderText: '请输入链接地址',
				success: (res) => {
					if (res.confirm && res.content) {
						this.content += `\n[链接](${res.content})\n`;
					}
				}
			});
		},
		formatText(type) {
			const formats = {
				bold: '**',
				italic: '*'
			};
			this.content += formats[type];
		},
		addTag() {
			if (!this.newTag.trim() || this.tags.length >= 5) return;
			if (!this.tags.includes(this.newTag.trim())) {
				this.tags.push(this.newTag.trim());
			}
			this.newTag = '';
		},
		removeTag(index) {
			this.tags.splice(index, 1);
		},
		saveDraft() {
			if (!this.validateForm(false)) return;
			
			uni.showToast({
				title: '已保存草稿',
				icon: 'success'
			});
		},
		publishArticle() {
			if (!this.validateForm(true)) return;
			
			uni.showModal({
				title: '发布确认',
				content: '确定要发布这篇文章吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '发布成功',
							icon: 'success',
							duration: 2000,
							success: () => {
								setTimeout(() => {
									uni.navigateBack();
								}, 2000);
							}
						});
					}
				}
			});
		},
		validateForm(isPublishing) {
			if (isPublishing) {
				if (!this.title.trim()) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.selectedGame) {
					uni.showToast({
						title: '请选择游戏',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.selectedCategory) {
					uni.showToast({
						title: '请选择分类',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.content.trim()) {
					uni.showToast({
						title: '请输入文章内容',
						icon: 'none'
					});
					return false;
				}
				
				if (this.tags.length === 0) {
					uni.showToast({
						title: '请至少添加一个标签',
						icon: 'none'
					});
					return false;
				}
			}
			
			return true;
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
	padding-bottom: 80px;
}

.form-section {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
}

.form-item {
	margin-bottom: 20px;
}

.form-item:last-child {
	margin-bottom: 0;
}

.label {
	font-size: 14px;
	color: #9796B8;
	margin-bottom: 8px;
	display: block;
}

.input-field {
	background: #1E1E2E;
	border-radius: 8px;
	padding: 12px;
	color: #9796B8;
	font-size: 14px;
}

.game-selector {
	background: #1E1E2E;
	border-radius: 8px;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.selected-game {
	display: flex;
	align-items: center;
	gap: 10px;
}

.game-logo {
	width: 40px;
	height: 40px;
	border-radius: 8px;
}

.game-name {
	color: #9796B8;
	font-size: 14px;
}

.placeholder {
	color: #6E6C89;
	font-size: 14px;
}

.arrow {
	color: #6E6C89;
	font-size: 18px;
}

.category-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.category-tag {
	padding: 6px 12px;
	border-radius: 15px;
	font-size: 14px;
	color: #6E6C89;
	background: #1E1E2E;
}

.category-tag.active {
	background: #9796B8;
	color: #1E1E2E;
}

.cover-uploader {
	background: #1E1E2E;
	border-radius: 8px;
	height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cover-preview {
	position: relative;
	width: 100%;
	height: 150px;
	border-radius: 8px;
	overflow: hidden;
}

.preview-image {
	width: 100%;
	height: 100%;
}

.remove-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.editor-toolbar {
	display: flex;
	gap: 12px;
	padding: 8px;
	background: #1E1E2E;
	border-radius: 8px 8px 0 0;
	border-bottom: 1px solid rgba(110, 108, 137, 0.1);
}

.tool-item {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.tool-item:active {
	background: rgba(110, 108, 137, 0.1);
}

.content-editor {
	background: #1E1E2E;
	border-radius: 0 0 8px 8px;
	padding: 12px;
	width: 100%;
	height: 300px;
	color: #9796B8;
	font-size: 14px;
}

.tags-input {
	background: #1E1E2E;
	border-radius: 8px;
	padding: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tag-item {
	display: flex;
	align-items: center;
	gap: 4px;
	background: rgba(151, 150, 184, 0.1);
	padding: 4px 8px;
	border-radius: 4px;
}

.tag-text {
	font-size: 12px;
	color: #9796B8;
}

.remove-tag {
	font-size: 14px;
	color: #6E6C89;
}

.tag-input-field {
	flex: 1;
	min-width: 100px;
	font-size: 12px;
	color: #9796B8;
}

.tip-text {
	font-size: 12px;
	color: #6E6C89;
	margin-top: 4px;
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #2D2D44;
	padding: 12px;
	display: flex;
	gap: 12px;
}

.draft-btn, .publish-btn {
	flex: 1;
	height: 40px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.draft-btn {
	background: #1E1E2E;
	color: #9796B8;
}

.publish-btn {
	background: #9796B8;
	color: #1E1E2E;
}

.game-picker {
	background: #2D2D44;
	border-radius: 12px 12px 0 0;
	max-height: 70vh;
}

.picker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid rgba(110, 108, 137, 0.1);
}

.cancel, .confirm {
	color: #6E6C89;
	font-size: 14px;
}

.confirm {
	color: #9796B8;
}

.picker-header .title {
	color: #9796B8;
	font-size: 16px;
}

.game-list {
	padding: 15px;
	max-height: calc(70vh - 50px);
	overflow-y: auto;
}

.game-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
}

.game-item.active {
	background: rgba(151, 150, 184, 0.1);
}

.iconfont {
	font-size: 20px;
	color: #6E6C89;
}
</style> 